<template>
  <section class="main" id="main">
    <post-item v-for="item in total" :key="item"></post-item>
  </section>
</template>

<script setup>
import { onMounted, ref } from "vue";
import request from "../../utils/request";
import PostItem from "./components/PostItem.vue";
const WindowClientHeight = document.documentElement.clientHeight - 160;
let total = ref(20)
onMounted(() => {
  request(
    "https://mockapi.eolink.com/SHQdMWnc0600b265c0d20410ed7c36e0eec1dc8fe7e5087/post/get?responseId=1201981",
    {
      page: 1,
      size: 10,
    },
    0
  ).then((res) => {
    console.log(res);
  });
  window.onscroll = function (e) {
    let main = document.getElementById("main");
    let offsetHeight = main.offsetHeight; //元素在屏幕上所用的所有可见区域的高度
    var scrollTop = document.documentElement.scrollTop; //  获取或设置一个元素的内容垂直滚动的像素数
    if (scrollTop + WindowClientHeight * 2 > offsetHeight) {
      total.value += 20
    }
  };
});

</script>
<style scoped lang='less'>
.main {
  columns: 2;
  column-gap: 5%;
}
</style>